<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/scrollbar-util.js"></script>
<script src="../../resources/blink-coordinates-util.js"></script>
<script src="resources/scroller-util.js"></script>
<script src="resources/percent-based-util.js"></script>

<style>
  .scroller {
    width: 300px;
    height: 300px;
    overflow: scroll;
  }

  .scroller>.child {
    width: 4000px;
    height: 4000px;
  }
</style>


<div id="scroller" class="scroller">
  <div class="child"></div>
</div>
<script>
  const ZOOM_RATIO = 3;

  // 1 - Test arrows
  promise_test(async function () {
    // Mac doesn't have scrollbar arrows.
    const onMacPlatform = navigator.userAgent.includes("Mac OS X");
    if(onMacPlatform)
      return;

    testRunner.setPageZoomFactor(1);

    // As the clamping is made in un-zoomed physical pixels, zoom-out back to
    // 100% before calculating:
    const expected_x =
      Math.round(SCROLLBAR_SCROLL_PERCENTAGE * window.innerWidth) / ZOOM_RATIO;
    const expected_y =
      Math.round(SCROLLBAR_SCROLL_PERCENTAGE * window.innerHeight) / ZOOM_RATIO;

    testRunner.setPageZoomFactor(ZOOM_RATIO);

    await runScrollbarArrowsTest(scroller, expected_x, expected_y);

  }, "Percent scrolling using scrollbar arrows clamped by viewport size");


  // 2 - Test mousewheel

  promise_test(async function () {
    const WHEEL_PERCENTAGE = 0.1;

    // As the clamping is made in un-zoomed physical pixels, zoom-out back to
    // 100% before calculating:
    testRunner.setPageZoomFactor(1);
    const expected_x =
      Math.round(WHEEL_PERCENTAGE * window.innerWidth) / ZOOM_RATIO;
    const expected_y =
      Math.round(WHEEL_PERCENTAGE * window.innerHeight) / ZOOM_RATIO;

    testRunner.setPageZoomFactor(ZOOM_RATIO);

    await runMousewheelTest(scroller, expected_x, expected_y, WHEEL_PERCENTAGE);
  }, "Percent scrolling using mousewheel clamped by visual viewport");

</script>
